<template>
  <div class="wallet-charge">
    <x-header>充值<a slot="right"></a></x-header>
    <Group title="充值金额">
      <x-input type="text" onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d{2}$/.test(this.money))event.returnValue=false" title="￥" v-model="money"></x-input>
    </Group>
    <group title="选择支付方式">
      <radio :options="payType" v-model="payTypeVal"></radio>
    </group>
    <div class="btn-to-rechargeRecharge">
      <span style="color:#EFA79B;" @click="$router.push('/rechargerecords/0')">充值记录</span>
    </div>
    <x-button class="recharge-btn" @click.native="handlePay">支付</x-button>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import { shareWechat } from '../../js/utils'
import {
  XHeader,
  XButton,
  Radio,
  XInput,
  Group,
  GroupTitle
} from 'vux';
const IndexStore = namespace('home');

@Component({
  components: {
    XHeader,
    Radio,
    XButton,
    XInput,
    Group,
    GroupTitle
  }
})
export default class WalletCharge extends Vue {
  @IndexStore.Action getChargeUserData;
  @IndexStore.Action getRechargeData;
  @IndexStore.State chargeUserData;
  @IndexStore.State rechargeData;
  payTypeVal = '021'
  money = ''
  payType = [
    // { key: '021', value: '支付宝' },
    // { key: '022', value: '微信' }
  ]
  created () {

    // 获取该手机支持的支付方式
    plus.payment.getChannels(channels => {
      for (let i in channels) {
        let channel = channels[i]
        switch(channel.id)
        {
          case 'alipay': // 支付宝
            this.payType.push({key: '021', value: '支付宝', channel: channel})
            break;
          case 'wxpay': // 微信支付
            // this.payType.push({key: '022', value: '微信', channel: channel})
            break;
        }
      }
    })

  }
  handlePay () {
    // 获取选中的支付通道
    let payChannel = this.payType.find(v => { return v.key == this.payTypeVal }).channel

    const params = {
      channel_id: this.payTypeVal,
      occur_balance: this.money,
      prod_name: "uu+u",
      summary: "中文"
    }
    // getChargeUserData
    // getRechargeData
    this.getRechargeData(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle')
      } else {
        let order = this.rechargeData['data'][0]['view']
        //chargeUserData
        console.log(order)

        order = 'service="mobile.securitypay.pay"&partner="2088801273866834"&_input_charset="UTF-8"&out_trade_no="20181113132707"&subject="DCloud项目捐赠"&payment_type="1"&seller_id="payservice@dcloud.io"&total_fee="1"&body="DCloud致力于打造HTML5最好的移动开发工具，包括终端的Runtime、云端的服务和IDE，同时提供各项配套的开发者服务。"&it_b_pay="1d"&notify_url="http%3A%2F%2Fdemo.dcloud.net.cn%2Fpayment%2Falipay%2Fnotify.php"&show_url="http%3A%2F%2Fwww.dcloud.io%2Fhelloh5%2F"&sign="GuL%2BAYLFsegilGv3PoS1gQsnfqOIEoP6FQLixzo%2FxKGCTiZx08r5cfmvGBZ3qbGbjll7BFc8JRIFHoAjUBzzjClESMiY3b50m4%2FzZjoKfE%2BJZ84U6gV%2FMCmvvwsxkjrz0%2FMIq%2F%2Bbc6%2BBkFk%2FSRllrGh75%2FJG3BcuL5YhPcgkBNg%3D"&sign_type="RSA"'

        // 发起充值
        plus.payment.request(payChannel, order, raw => {
          console.log('支付结果：' + JSON.stringify(raw))
          this.$router.push({path: '/submitpage'});
        }, e => {
          console.log('支付失败：' + e.code + '|||' + e.message)
          this.$vux.toast.text('充值失败', 'middle')
        })
      }
    }).catch((e) => {
      console.log(e)
    })
  }
}
</script>
<style lang="less">
.wallet-charge {
  .btn-to-rechargeRecharge {
    width: 95%;
    margin: 0 auto;
    height: 44px;
    line-height: 44px;
    text-align: right;
  }
  .recharge-btn {
    width: 95%;
    margin: 0 auto;
    margin-top: 15px;
    color: #ffffff;
    background-color: #EFA79B;
  }
  .weui-btn:after {
    content: initial;
  }
}
</style>
